<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
	    table {
	      width: 800px;
	      margin: 100px auto;
	      text-align: center;
	      border-collapse: collapse;
	      font-size: 14px;
	    }
	 
	    thead tr {
	      height: 30px;
	      background-color: skyblue;
	    }
	 
	    tbody tr {
	      height: 30px;
	    }
	 
	    tbody td {
	      border-bottom: 1px solid #d7d7d7;
	      font-size: 12px;
	      color: blue;
	    }
	 
	    .bg {
	      background-color: rgb(249, 255, 192);
	    }
	  </style>
	<body>
		<table>
		    <thead>
		      <tr>
		        <th>学号</th>
		        <th>姓名</th>
		        <th>出生日期</th>
		        <th>籍贯</th>
		        <th>专业</th>
		      </tr>
		    </thead>
		    <tbody>
		      <tr>
		        <td>001</td>
		        <td>清风</td>
		        <td>2003.08.12</td>
		        <td>四川</td>
		        <td>计算机系</td>
		      </tr>
		      <tr>
		        <td>002</td>
		        <td>晓楠</td>
		        <td>2003.05.29</td>
		        <td>河南</td>
		        <td>外语系</td>
		      </tr>
		      <tr>
		        <td>003</td>
		        <td>何婷</td>
		        <td>2004.06.03</td>
		        <td>湖北</td>
		        <td>物理系</td>
		      </tr>
		      <tr>
		        <td>004</td>
		        <td>晓娟</td>
		        <td>2004.09.18</td>
		        <td>哈尔滨</td>
		        <td>计算机系</td>
		      </tr>
		    </tbody>
		  </table>
		  <script>
		      
		      var trs = document.querySelector('tbody').querySelectorAll('tr');

		      for (var i = 0; i < trs.length; i++) {
		        
		        trs[i].onmouseover = function () {
		          this.className = 'bg';
		        };
		        
		        trs[i].onmouseout = function () {
		          this.className = '';
		        };
		      }
		    </script>
	</body>
</html>